import React, { Component } from 'react'
import Header from '../../components/header/Headerbar'
import { MainBodyConatiner, HeadName } from './detailStyle'
import List from './detailList/detailList'
import Common from './commonList/common'
import { withRouter } from 'react-router-dom'

@withRouter
class DetailPage extends Component {

    componentDidMount() {
        // 监听路由变化
        this.listen = this.props.history.listen((route) => {
            if (document.querySelector('.mainBody')) {
                let wrapper = document.querySelector('.mainBody')
                wrapper.scrollTop = 0
            }
        })
    }


    backToHome = () => {
        // this.props.history.push('/index')
        this.props.history.go(-1)
    }

    render() {

        return (
            <div style={
                {
                    height: "100%",
                    display: "flex",
                    flexDirection: 'column',
                    background: '#fff'
                }
            }>
                <Header>
                    <i className="yo-ico" style={
                        {
                            fontSize: "0.3rem",
                            marginLeft: '0.08rem'
                        }

                    }
                        onClick={this.backToHome}
                    >&#xe743;</i>
                    <HeadName>
                        <span className="titName">
                            锋新闻
                            </span>
                    </HeadName>

                </Header>

                <MainBodyConatiner className="mainBody">
                    <h1 className="title">
                        {this.props.news.thread.subject}
                    </h1>
                    <div className="aside">
                        <i>
                            <img src="https://feng-bbs-att-1255531212.image.myqcloud.com/2020/03/09/151620xv4ifhgjyjwg342b.png" alt="" />
                        </i>
                        <div className="new_con">
                            <h5>锋新闻</h5>
                            <p>
                                <span >
                                    {this.props.news.thread.updateTime}
                                </span>
                                <span
                                    style={{
                                        marginLeft: "0.1rem"
                                    }}>
                                    {this.props.news.thread.tail}

                                </span>
                            </p>
                        </div>
                        <span className="subscibe">
                            + 关注
                            </span>
                    </div>
                    {this.props.news.thread.intro && <div className="introduce">
                        <img src="" alt="" />
                        <h1>
                            {this.props.news.thread.intro}
                        </h1>
                    </div>}

                    <div className="article"
                        dangerouslySetInnerHTML={{ __html: this.props.news.thread.message }}
                    >
                    </div>

                    <div className="brilliant">
                        <ul>
                            {this.props.news.newsList.length>0 && <h3
                                style={
                                    {
                                        fontWeight: '600',
                                        paddingBottom: '0.1rem',
                                        fontSize: '0.14rem',
                                        paddingLeft: '0.2rem'
                                    }
                                }
                            >精彩阅读</h3>}
                            {
                                this.props.news.newsList && this.props.news.newsList.map(val => {
                                    return <List item={val} key={val.tid}></List>
                                })
                            }
                        </ul>
                    </div>

                    <div>
                        <Common></Common>
                    </div>

                </MainBodyConatiner>

            </div >
        )


    }
}

export default DetailPage